<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="../libs/jquery/jquery.js"></script>

  <form>
    <div>
      <input type="text" name="username" placeholder="请输入用户名">
    </div>
    <div>
      <input type="text" name="password" placeholder="请输入密码">
    </div>
    <button type="button">提交</button>
  </form>


  <script>
    /*
    序列化   可以很方便的把一些表单数据 处理成 字符串格式！！

    平时 前端沟通讲到序列化   两种不同的写法

    1 jq  $("form").serialize();   有 form表单   form中 有 表单组件 input标签 必须要提供name属性！！
    2 formdata
     */


    $("button").click(function () {
      // 1 jq序列化  
      // const data = $("form").serialize();
      // 2 formdata
      const form = document.querySelector("form");
      const formData = new FormData(form);

      // formdata是特殊的对象 直接打印 没有效果！！ 
      // forEach
      formData.forEach((val, key) => {
        console.log(key, val);
      })










    })




  </script>
</body>

</html>